
var coinImage = new Image();
coinImage.src = "images/coin-sprite-animation.png";

var diss = false;




function gameLoop () {
  window.requestAnimationFrame(gameLoop);
    coin.update();
  coin.render();
      coin2.update2();
          coin2.render2();
}






// Start the game loop as soon as the sprite sheet is loaded
coinImage.addEventListener("load", gameLoop);
//canvas.addEventListener("mousedown", tap);



function tap(e){
	tapx = e.targetTouches ? e.targetTouches[0].pagex : e.pagex,
	tapy = e.targetTouches ? e.targetTouches[0].pagey : e.pagey;
	if(tapX >= coin2.x1&&tapx<=coin2.x1+100)
	{
		
		
		
	}
	
	
	
	
}


function sprite (options) {		
			
   var that = {},
        frameIndex = 0,
        tickCount = 0,
        ticksPerFrame = options.ticksPerFrame || 0;
        numberOfFrames = options.numberOfFrames || 1;
    
	
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.x2 = options.x2;
    that.y2 = options.y2;
    
    
    that.loop = options.loop;

        that.update = function () {
        tickCount += 1;			
        if (tickCount > ticksPerFrame) {
        	tickCount = 0;
       	// If the current frame index is in range
            if (frameIndex < numberOfFrames - 1) {	

            // Go to the next frame
            frameIndex += 1; 
             } else if (that.loop) {
                frameIndex = 0;
       }
       
       else{
       	
        frameIndex = 0;
       } }
    };
    	that.render = function () { 
    		
    		// Clear the canvas
    that.context.clearRect(0, 0, that.width, that.height);	
   // Draw the animation     
    that.context.drawImage( 
    	that.image,          
		frameIndex * that.width / numberOfFrames,
           0,
           that.width / numberOfFrames, 
           that.height,
           that.x2, 
           that.y2,
           that.width / numberOfFrames,
 			that.height);
 };
    return that;
}





function sprite2 (options) {		
			
   var that = {},
        frameIndex2 = 0,
        tickCount2 = 0,
        ticksPerFrame2 = options.ticksPerFrame2 || 0;
        numberOfFrames2 = options.numberOfFrames2 || 1;
    
	
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.x1 = options.x1;
    that.y1 = options.y1;
    
    
    that.loop = options.loop;

        that.update2 = function () {
        tickCount2 += 1;			
        if (tickCount2 > ticksPerFrame2) {
        	tickCount2 = 0;
       	// If the current frame index is in range
            if (frameIndex2 < numberOfFrames2 - 1) {	

            // Go to the next frame
            frameIndex2 += 1; 
             } else if (that.loop) {
                frameIndex2 = 0;
       }
       
       else{
       	
        frameIndex2 = 0;
       } }
    };
    	that.render2 = function () { 
    		
    		// Clear the canvas
   // that.context.clearRect(0, 0, that.width, that.height);

    // Draw the animation     
    that.context.drawImage( 
    	that.image,          
		frameIndex2 * that.width / numberOfFrames2,
           0,
           that.width / numberOfFrames2, 
           that.height,
           that.x1, 
           that.y1,
           that.width / numberOfFrames2,
 			that.height);
 				
 		
 			  
 };
    return that;
}



var canvas = document.getElementById("coinAnimation");
canvas.width = 1000;
canvas.height = 1000;


var coin = sprite({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames: 10,
    ticksPerFrame: 10,
          x2:32 + (Math.random() * (canvas.width - 300)),
      y2:32 + (Math.random() * (canvas.width - 300))

});


var coin2 = sprite2({
    context: canvas.getContext("2d"),
    width: 1000,
    height: 1000,
    image: coinImage,
    numberOfFrames2: 10,
    ticksPerFrame2: 1,
    x1:32 + (Math.random() * (canvas.width - 300)),
      y1:32 + (Math.random() * (canvas.width - 300)),


});
